<template>
  <table border="1" width="80%" cellspacing="0" style="text-align: center">
    <thead>
    <tr>
      <td>编号</td>
      <td>商品名</td>
      <td>产地</td>
      <td>单价</td>
      <td>数量</td>
      <td>单项总价</td>
      <td>类别</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr v-for="product in productList">
      <td>{{ product.id }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.factory }}</td>
      <td>{{ product.price }}</td>
      <td><input type="text" v-model="product.num"></td>
      <td>{{ product.price * product.num }}</td>
      <td>{{ product.type }}</td>
      <td>
        <input type="button" value="删除" @click="del(product.id)">
        <input type="button" value="修改" @click="findById(product.id)">
      </td>
    </tr>
    </tbody>
    <input type="button" v-for="page in pages" :key="page"
    :value="page" @click="findByItem(page)" style="margin-right: 20px"/>
    <div>
      购物车总价：{{totalPrice}}
    </div>
  </table>
  <br>
  <input type="button" value="添加" @click="addStatus = true">
  <div class="showDiv" v-if="addStatus">
    <div class="hiddenDiv">
      编号：<input type="text" v-model="productObj.id"><br>
      商品名：<input type="text" v-model="productObj.name"><br>
      产地：<input type="text" v-model="productObj.factory"><br>
      单价：<input type="text" v-model="productObj.price"><br>
      类别：<select v-model="productObj.type">
      <option value="食品">食品</option>
      <option value="电器">电器</option>
    </select><br>
      <input type="button" value="添加" @click="addProduct()"><br>
    </div>
  </div>

  <div class="showDiv" v-if="updateStatus">
    <div class="hiddenDiv">
      编号：{{updateObj.id}}<br>
      商品名：{{updateObj.name}}<br>
      产地：{{updateObj.factory}}<br>
      单价：<input type="text" v-model="updateObj.price"><br>
      类别：{{updateObj.type}}<br>
      <input type="button" value="修改" @click="updateProduct()"><br>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addStatus: false,
      pages:5,
      productObj: {},
      productList: [
        {"id": 1, "name": "电饭煲", "factory": "深圳", "price": "600", "type": "电器",num:1},
        {"id": 4, "name": "饼干", "factory": "青岛", "price": "12", "type": "食品",num:1},
        {"id": 12, "name": "电冰箱", "factory": "北京", "price": "2000", "type": "电器",num:1},
        {"id": 7, "name": "八宝粥", "factory": "上海", "price": "6", "type": "食品",num:1},
        {"id": 9, "name": "凤爪", "factory": "四川", "price": "20", "type": "食品",num:1},
        {"id": 5, "name": "扫地机", "factory": "广州", "price": "500", "type": "电器",num:1},
      ],
      updateStatus:false,
      updateObj: {}
    }
  },
  methods:{
    addProduct(){
      this.productList.push(this.productObj);
      this.addStatus = false;
    },
    del(id){
      var index = this.productList.findIndex(n => n.id == id);
      this.productList.splice(index,1);
    },
    findById(id){
      this.updateStatus = true;
      this.updateObj = this.productList.find(n => n.id == id);
    },
    updateProduct(){
      this.updateObj = {};
      this.updateStatus = false;
    },
    findByItem(page){
      alert(page);
    }
  },
  computed:{
    totalPrice(){
      var total = 0;
      this.productList.forEach(n =>{
        total += n.price * n.num;
      });
      return total;
    }
  }
}
</script>

<style scoped>
.showDiv {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  display: flex;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: center;
}

.hiddenDiv {
  width: 400px;
  height: 300px;
  background-color: white;
  border: 1px solid #000;
  padding: 50px;
}
</style>